<template>
  <div class="tableBox">
    <div class="search">
      <el-form :model="searchForm" label-width="120px">
        <el-row :gutter="10">
          <el-col 
          :span="6" 
          v-if="search"
          v-for="(item,index) in searchColumns"
          :key="item.props"
          >
            <el-form-item
            v-if="item.type=='select'"
            :label="item.name" 
            >
            <!-- clearable
              @clear="getList(searchForm)" -->
              <el-select
              remote
              @change="getList(searchForm)"
              :remot-method="remoteMethod(item.dictionary,item.props)" 
              v-model="searchForm[item.props]"
              :placeholder="item.placeholder?item.placeholder:'请选择'+item.name">
                <el-option
                v-for="v in searchOption[item.props+'List']"
                :key="v.id"
                :label="v.value"
                :value="v.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item 
            v-else
            :label="item.name" 
            :label-width="item.formLabel">
              <el-input 
              clearable 
              @clear="getList(searchForm)" 
              v-model="searchForm[item.props]" 
              style="width:100%"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="10">
              <el-button 
              type="primary" 
              round 
              v-if="search"
              @click="getList(searchForm)">搜索</el-button>
              <el-button round @click="toadd">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="opration" v-if="opration">
      操作
    </div>
    <!-- 表格内容 -->
    <el-table
    :cell-style="{textAlign:'left'}"
    :header-row-style="{textAlign:'left'}"
    class="tableData"
    :data="tableData">
      <el-table-column 
      v-loading="loading"
      v-for="(item,index) in columnsList" 
      :prop="item.props" 
      :label="item.name" 
      :width="item.width?item.width:''">
        <template #header>
          <div v-if="item.props=='exit'" style="text-align: center;">操作</div>
          <slot v-else :name="item.props+'Header'">{{ item.name }}</slot>
        </template>
        <template v-if="item.props=='exit'" #default="scope">
          <div style="text-align: center;">
            <el-popconfirm
              width="220"
              confirm-button-text="OK"
              cancel-button-text="考虑一下"
              :icon="InfoFilled"
              icon-color="#626AEF"
              @confirm="remove(scope.row.id)"
              title="确认删除，找不回来的哦?"
            >
              <template #reference>
                <el-button type="danger" text>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button v-if="exit" type="primary" text @click="toExit(scope.row.id)">修改</el-button>
          </div>
        </template>
        <template #default="scope" v-if="item.props!='exit'">
          <slot 
          :name="item.props"
          :row="scope.row"
          >
            <div v-if="item.type=='select'">
              {{ searchOption[item.props+'List'].find((v:any)=>v.id==scope.row[item.props])?.value }}
            </div>
            <div v-else>{{ scope.row[item.props] }}</div>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox" v-if="pagination">
      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="pageInfo.current"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          size="small"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
    <Dialog
    v-if="show"
    :url="url"
    :show="show"
    :title="title" 
    :searchOption="searchOption"
    @changeDialog="changeDialog"
    :formList="formList"></Dialog>
  </div>
</template>
 
<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import request from '@/utils/request';
import { defineProps,ref ,reactive} from 'vue';
import Dialog from "@/components/Dialog/index.vue";
import localeZH from 'element-plus/dist/locale/zh-cn.mjs'

let locale = localeZH

const props = defineProps({
  columns:{
    type:Array
  },
  pagination:{
    type:Boolean,
    default:false
  },
  opration:{
    type:Boolean,
    default:false
  },
  search:{
    type:Boolean,
  },
  exit:{
    type:Boolean,
    default:true
  },
  add:{
    type:Boolean,
  },
  url:{
    type:String,
    default:''
  }
})
const {columns,pagination,opration,url,search,add}:any = props
const loading = ref<Boolean>(false)
const pageInfo = ref({
  current:1,
  pageSize:10,
  total:0
})

const columnsList:any = ref([])
columnsList.value = columns.filter((item:any)=>!item.hide)

const formList:any = ref([])
const searchForm:any = reactive({})
const searchColumns:any = ref([])
const searchOption:any = ref({})
columns.forEach((item:any)=>{
  if(item.type=='select'){
    searchOption.value[item.props+'List']=[]
  }
  if(item.search){
    searchForm[item.props]=""
    searchColumns.value.push(item)
  }
  if(item.add){
    formList.value.push(item)
  }
})

/**
 * 获取下拉选项
 */
function remoteMethod(query:any,props:String){
  request({
    method:'get',
    url:query
  }).then((res:any)=>{
    searchOption.value[props+"List"] = res.data.data
  })
}

/**
 * 获取数据
 */
const tableData:any = ref([])
function getList(data:any){
  let searchData = data
  if(pagination){
    searchData = {...data,...pageInfo.value}
  }
  loading.value=true
  request({
    method:'get',
    url:'/api'+url+'/getList',
    params:searchData
  }).then((res:any)=>{
    loading.value=false
    tableData.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
getList(searchForm)
/**
 * dialog框显示控件
 */
const show = ref(false)
let title = ref("")
function toadd(){
  show.value = true
  title.value = "新增"
}
function toExit(id:Number){
  show.value = true;
  title.value = "修改-"+id
}
/**
 * 关闭dialog
 */
function changeDialog(){
  show.value = false
  title.value=''
  getList(searchForm)
}

/**
 * 删除
 */
 function remove(ids:any){
  loading.value=true
  request({
    method:'delete',
    url:'/api'+url+'/delete?ids='+ids
  }).then((res:any)=>{
    if(res.data.code==200){
      ElNotification({
        title: '操作成功',
        message: res.data.data,
        type: 'success',
      })
      getList(searchForm)
      loading.value=false
    }
  })
 }

 /**
  * 分页查询
  */
 function handleSizeChange(val:any){
  pageInfo.value.pageSize=val
  getList(searchForm)
 }
 function handleCurrentChange(val:any){
  pageInfo.value.current=val
  getList(searchForm)
 }
</script>

<style lang="scss" scoped>
.tableBox{
  padding:10px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .opration{
    padding:5px 0;
  }
  .tableData{
    border-top:1px solid var(--el-border-color);
    flex: 1;
  }
  .paginationBox{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:80px;
    margin-top:-9px;
  }
}
.searchItem{
  padding:7px 0;
}
</style>